<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="content">
        <h2>公告详情</h2>
        <el-button v-show="notice.fileUrls !== null" type="text" size="small" @click="downloadMultiple(notice.fileUrls, notice.title)">点击下载相关资料</el-button>
        <mavon-editor
          v-model="notice.content"
          :boxShadow="false"
          :subfield="false"
          :defaultOpen="'preview'"
          :editable="false"
          :toolbarsFlag="false"
          />
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '',
      notice: {
        id: null,
        noticeTypeId: '',
        title: '',
        content: '',
        fileUrls: ''
      }
    };
  },
  created() {
    const noticeId = this.$route.params.id;
    console.log('noticeId:' + noticeId)
    if (noticeId) {
      this.$http.get('/grant/noticeList/' + noticeId).then(({ data }) => {
        this.notice = data.data
      })
    } 
  },
  methods: {
    async downloadMultiple(fileUrls, userName) {
      const fileUrlList = fileUrls.split(',').map(url => url.trim());
      for (let i = 0; i < fileUrlList.length; i++) {
        await this.download(fileUrlList[i], userName + '_' + i+1);
      }
    },
    // 下载的具体方法
    async download (url, name) {
      let response = await fetch(url)
      // 内容转变成blob地址
      let blob = await response.blob()
      // 创建隐藏的可下载链接
      let objectUrl = window.URL.createObjectURL(blob)
      let a = document.createElement('a')
      a.style.display = "none";
      //地址
      a.href = objectUrl
      //修改文件名
      console.log(name + 'name')
      a.download = name
      // 触发点击
      document.body.appendChild(a)
      a.click()
      //移除
      URL.revokeObjectURL(a.href);
    }
  }
};
</script>
